.field-diff-viewer {
  .diff-tree {
    .ant-tree-node-content-wrapper {
      &.diff-added {
        background-color: #f6ffed;
        border-left: 3px solid #52c41a;
      }
      
      &.diff-removed {
        background-color: #fff2f0;
        border-left: 3px solid #ff4d4f;
        text-decoration: line-through;
      }
      
      &.diff-modified {
        background-color: #e6f7ff;
        border-left: 3px solid #1890ff;
      }
    }
  }

  .value-comparison {
    .before-value {
      background-color: #fff2f0;
      border: 1px solid #ffccc7;
      padding: 8px;
      border-radius: 4px;
    }
    
    .after-value {
      background-color: #f6ffed;
      border: 1px solid #b7eb8f;
      padding: 8px;
      border-radius: 4px;
    }
  }

  .mapping-card {
    margin-bottom: 8px;
    
    &.critical {
      border-left: 4px solid #ff4d4f;
    }
    
    &.sensitive {
      border-left: 4px solid #fa8c16;
    }
  }

  .severity-indicator {
    &.low {
      border-left: 4px solid #52c41a;
    }
    
    &.medium {
      border-left: 4px solid #fa8c16;
    }
    
    &.high {
      border-left: 4px solid #ff4d4f;
    }
  }

  .transformation-timeline {
    .ant-timeline-item-head {
      &.added {
        background-color: #52c41a;
        border-color: #52c41a;
      }
      
      &.removed {
        background-color: #ff4d4f;
        border-color: #ff4d4f;
      }
      
      &.modified {
        background-color: #1890ff;
        border-color: #1890ff;
      }
    }
  }
}

.field-diff-filters {
  background-color: #fafafa;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  
  .filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.diff-statistics {
  .stat-card {
    text-align: center;
    padding: 16px;
    
    .stat-number {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 4px;
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}